<template>
    <div class="tag-container">
        <div class="tag-main">
            <el-tag ref="mainIndex" :type="indexTagType" @click="handleClick(null)"
                    style="min-width: 80px;font-size: 14px;">首&nbsp;页
            </el-tag>
        </div>
        <div class="tag-tabs" ref="tags" @wheel="handleWheel">
            <div v-for="tag in tags" :key="tag.path">
                <el-tag closable :disable-transitions="false" :type="tag.type"
                        style="min-width: 80px;font-size: 14px;"
                        @close="handleClose(tag)" @click="handleClick(tag)">
                    {{tag.name}}
                </el-tag>
            </div>
        </div>
        <div class="tag-operate">
            <el-dropdown @command="handleCommand" trigger="click">
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="close_curr"><i class="el-icon-minus">&nbsp;关闭当前</i>
                    </el-dropdown-item>
                    <el-dropdown-item command="close_all"><i class="el-icon-close">&nbsp;关闭全部</i>
                    </el-dropdown-item>
                    <el-dropdown-item command="logout"><i class="el-icon-switch-button">&nbsp;退出系统</i>
                    </el-dropdown-item>
                    <!--                    <el-dropdown-item command="refresh_curr">刷新当前</el-dropdown-item>-->
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: "Tag",
        props: {
            isIndexTag: {
                type: Boolean,
                required: true
            }
        },
        data() {
            return {
                isCollapse: false
            }
        },
        computed: {
            //系统当前登录用户
            currLoginUser: function () {
                let userStr = sessionStorage.getItem("currLoginUser");
                return userStr ? JSON.parse(userStr) : null;
            },
            //导航标签数据
            tags: function () {
                return this.$store.state.sysStore.tagsBarData;
            },
            // 首页tag 类型
            indexTagType: function () {
                return this.isIndexTag ? "primary" : "info";
            }
        },
        methods: {
            //关闭标签
            handleClose(tag) {
                this.$store.commit('removeTag', tag);
                let tagsBarData = this.$store.state.sysStore.tagsBarData;
                if (tagsBarData.length === 0) {
                    this.$emit("setMenuItemActive", null);
                    this.$refs['mainIndex'].handleClick();
                } else {
                    //设置选中的tag和menuItem
                    this.$store.commit('pushTag', tagsBarData[tagsBarData.length - 1]);
                    this.$emit("setMenuItemActive", tagsBarData[tagsBarData.length - 1]);
                    this.$router.push({path: tagsBarData[tagsBarData.length - 1].path});
                }
            },
            //点击标签
            handleClick(tag) {
                this.$store.commit('pushTag', tag);
                this.$emit("setMenuItemActive", tag);
                this.$router.push({path: tag ? tag.path : "/index/main"});
            },
            handleCommand(command) {
                let _this = this;
                switch (command) {
                    case "close_curr":
                        //找出当前激活的tag
                        let tagsBarData = this.$store.state.sysStore.tagsBarData;
                        let currTag = tagsBarData.find(tag => {
                            return tag.type === "primary";
                        });
                        //关闭当前的tag
                        _this.handleClose(currTag);
                        break;
                    case "close_all":
                        _this.$store.commit('removeTag', null);
                        _this.$emit("setMenuItemActive", null);
                        break;
                    case "refresh_curr":
                        break;
                    case "logout":
                        this.logout();
                        break;
                }
            },
            //退出
            logout() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/sys/logout/" + this.currLoginUser.loginName, {}).then(res => {
                    this.loading = false;
                    if (res.code === 200) {
                        sessionStorage.clear();
                        this.$router.push({path: "/"});
                    }
                });
            },
            handleWheel(e) {
                this.$refs['tags'].scrollLeft += (e.wheelDelta || e.detail) > 0 ? -100 : 100;
            }
        }, mounted() {
            //跳转到首页路由
            this.$refs['mainIndex'].handleClick();
        }
    }
</script>

<style scoped lang="scss">
    .tag-container {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .tag-main {
        flex: 4 1 45px;
        align-items: center;
        text-align: center;
        line-height: 3vh;
    }

    .tag-tabs {
        flex: 150 1 45px;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .tag-operate {
        flex: 5 1 45px;
        align-items: center;
        text-align: center;
        box-shadow: -5px 0 10px -5px #6e706e;
        line-height: 3vh;
        background-color: #bfbfbf21;
    }

    .el-tag {
        cursor: pointer;
        border-radius: 2px;
        margin: 2px 1px 2px 1px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #909399;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .el-dropdown-menu__item {
        color: #909399;
    }

    .el-dropdown {
        height: 36px;
        line-height: 36px;
    }

    /*修改滚动条样式--start*/
    .tag-tabs::-webkit-scrollbar {
        display: none;
    }

    /*修改滚动条样式--end*/
</style>
